<template>
    <el-tabs type="border-card">
        <el-tab-pane :label="info_id?'编辑信息':'发布信息'">
            <el-form
                label-position="top"
                label-width="80px"
                :model="formLabelAlign"
                ref="ruleForm"
                :rules="rules"
            >
                <el-form-item label="标题" prop="title">
                    <el-input
                        class="title"
                        v-model="formLabelAlign.title"
                        maxlength="30"
                        show-word-limit
                    > </el-input>
                </el-form-item>

                <el-form-item label="key" prop="key">
                    <el-input
                        class="title"
                        v-model="formLabelAlign.key"
                        maxlength="30"
                        show-word-limit
                    > </el-input>
                </el-form-item>

                <el-form-item label="icon" prop="icon">
                    <el-input
                        class="title"
                        v-model="formLabelAlign.icon"
                        maxlength="50"
                        show-word-limit
                    > </el-input>
                </el-form-item>

                <el-form-item label="内容" prop="content">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 8}"
                        class="title"
                        v-model="formLabelAlign.content"
                    > </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit">立即提交</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import { infoEdit,infoAdd,infoAdminDetail } from '@/api/info'
    import {EditRules} from "@forms/info";

    export default {
        name: "infoEdit",
        data() {
            return {
                formLabelAlign:{
                    title:'',
                    content:'',
                    key:'',
                    icon:'',
                },
                info_id:'',
                rules:EditRules,
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init(){
                this.info_id = this.$route.params.info_id
                if(this.info_id)this.getDetail()
            },
            getDetail() {
                infoAdminDetail(this.info_id)
                    .then(res=>{
                        if(Number(res.code)===0){
                            let data = res.data
                            Object.assign(this.formLabelAlign,{
                                title:data.title,
                                content:data.content,
                                key:data.info_key,
                                icon:data.icon,
                            })
                        }else{
                            this.$Alert({ message:res.msg, type:'error' })
                        }
                    })
            },
            submit(){
                let formLabelAlign = this.formLabelAlign
                let params = {
                    title:formLabelAlign.title,
                    content:formLabelAlign.content,
                    key:formLabelAlign.key,
                    icon:formLabelAlign.icon,
                }

                if(this.info_id){
                    infoEdit(this.info_id,params)
                        .then(res=>this.resultHandle(res))
                }else{
                    infoAdd(params)
                        .then(res=>this.resultHandle(res))
                }

            },
            resultHandle(res){
                if(Number(res.code)===0){
                    this.$Alert({
                        message:res.msg,
                        type:'success',
                        callback:()=>this.$router.push('/admin/infoList')
                    })
                }else{
                    this.$Alert({ message:res.msg, type:'error' })
                }
            },
        },
    }
</script>

<style scoped lang="less">
    .infoEdit{
        width: 100%;
        height: 100%;
        background: #fff;
    }

    .title{
        width: 80%;
        min-width: 400px;
    }
</style>
